<template>
  <div class="swiper row m-auto">
    <swiper
      :options="swiperOption"
      ref="searchSwiper"
      class="col-md-12 col-sm-12 col-xs-12"
    >
      <!-- slides -->
      <swiper-slide v-for="(item1, i1) in more" :key="i1">
        <b-card
          tag="div"
          title-tag="h6"
          border-variant="secondary"
          header="Primary"
          header-border-variant="info"
          header-text-variant="danger"
        >
          <template v-slot:header>
            <h6 class="mb-0 tip1">{{ item1.title }} >></h6>
            <h6 class="mb-0 tip2">左右滑动更多搜索选择</h6>
          </template>
          <div
            class="more_list"
            @touchstart="handleStart($event)"
            @touchend="handleEnd($event)"
          >
            <ul class="row">
              <b-link
                @click="handleMoreItem(item2.url)"
                :disabled="$store.state.searchVals ? false : true"
                target="_bank"
                tag="li"
                v-for="(item2, i2) in item1.web"
                :key="i2"
                class="col-md-6 col-sm-6 col-xs-12"
              >
                <div class="list_item" :id="item2.url">
                  <img alt="ico" :src="item2.logo" width="30" height="30" />
                  <span class="title">{{ item2.name }}</span>
                </div>
              </b-link>
            </ul>
          </div>
          <!-- 底部关闭按钮 -->
          <div @click="closeMoreSearch" class="close">
            <b-icon icon="x" font-scale="1.3"></b-icon>
          </div>
        </b-card>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapState, mapMutations } from "vuex"; //引入vuex辅助函数
export default {
  data() {
    return {
      // 数据
      more: [],
      // swiper配置文件
      swiperOption: {
        loop: true,
        autoplay: true,
        delay: 5000,
        effect: "coverflow",
        // 解决轮播宽度的问题。当监听该元素或者父级元素DOM发生变化时，会刷新一次
        observeParents: true,
        observer: true,
      },
      // 记录被按下
      touchStart: {
        startTime: 0,
        startX: 0,
        startY: 0,
      },
      touchOptions: {
        delay: 2000, //滑动有效时长
        distanceX: 8, //X轴滑动距离
        distanceY: 15, //Y轴滑动距离
      },
    };
  },
  created() {
    this.getMoreData();
  },
  methods: {
    getMoreData() {
      this.more = this.$mydata.more;
    },
    closeMoreSearch() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
      // 改变vuex中searchWindow的值
      this.changeSearchWindow(0);
    },
    handleMoreItem(url) {
      let vals = this.searchVals;
      if (vals) {
        // 处理关键字后加搜索类型的
        let urls = url.replace(/{keyword}/, vals);
        if (url == urls) urls = url + vals; //相等时说明没有被替换
        window.open(urls);
      } else {
        this.alert("请输入内容进行搜索！");
      }
    },
    handleStart(e) {
      this.startTime = Date().now;
      this.touchStart.startX = e.changedTouches[0].clientX;
      this.touchStart.startY = e.changedTouches[0].clientY;
    },
    handleEnd(e) {
      let endTime = Date().now;
      let endX = e.changedTouches[0].clientX;
      let endY = e.changedTouches[0].clientY;
      if (endTime - this.touchStart.startTime > this.touchOptions.delay) {
        return false;
      }
      if (
        Math.abs(endX - this.touchStart.startX) > this.touchOptions.distanceX &&
        Math.abs(endY - this.touchStart.startY) < this.touchOptions.distanceY
      ) {
        let direction = endX - this.touchStart.startX;
        direction
          ? this.$refs.searchSwiper.swiper.slidePrev()
          : this.$refs.searchSwiper.swiper.slideNext();
      }
    },
    ...mapMutations(["changeSearchWindow", "alert"]),
  },
  computed: {
    ...mapState(["searchVals"]),
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

<style lang="less" scoped>
.swiper {
  max-width: 100%;
  width: 100%;
  @media screen and (max-width: 670px) {
    max-width: 500px;
  }
  @media screen and (max-width: 575px) {
    max-width: 300px;
  }
  .tip1 {
    float: left;
  }

  .tip2 {
    float: right;
    color: #056ab2;
    font-size: 0.8rem;
    opacity: 0.85;
  }
  .more_list {
    width: 100%;
    @media screen and (max-width: 500px) {
      height: 40vh;
      overflow: hidden;
    }
    .row {
      width: 100%;
      height: 100%;
      padding: 0;
      @media screen and (max-width: 500px) {
        overflow-y: auto;
      }
    }

    .list_item {
      font-size: 1rem;
      padding: 10px 0;
      cursor: pointer;

      .title {
        padding-left: 15px;
        color: #056ab2;
        font-size: 1rem;
        &:after {
          content: "";
          width: 50%;
          height: 1px;
          background: orangered;
          position: absolute;
          bottom: 5px;
          left: 15px;
          transform-origin: left center;
          /*设置元素基点位置*/
          transform: scaleX(0);
          /*设置元素X轴缩放*/
          transition: all 250ms ease;
          /*缓慢变化*/
        }

        &:hover:after {
          /*hover之后再使元素X轴放大1倍*/
          transform: scaleX(1);
        }
      }
    }
  }

  .close {
    width: 100%;
    height: 20%;
    text-align: center;
    transform: translateY(8px);
    svg {
      color: #056ab2;
      cursor: pointer;

      &:hover {
        color: orangered;
      }
    }
  }
  .card-body {
    padding-bottom: 5px;
  }
}
</style>
